<template>
  <div class="d2-nav-page">
    <nav-bar @active="handleActiveI" ref="navBar" @item-click="handleNavClick" @top-click="handleTopClick" :forms="forms"></nav-bar>
    <slot></slot>
  </div>
</template>

<script>
import util from "@/libs/util"

export default {
  components: {

  },
  mounted() {
    setTimeout(()=>{
      let el = document.body.getElementsByClassName('d2-container-full__body')[0];
      el.addEventListener('scroll', this.scrollListener)
    },1000)

  },
  beforeDestroy () {
    let el = document.body.getElementsByClassName('d2-container-full__body')[0];
    el.removeEventListener('scroll', this.scrollListener)
  },
  provide() {
    return {
      navPage: this
    };
  },
  data() {
    return {
      children:[],
    }
  },
  methods: {
    scrollListener(){
      for (let i =0;i<this.children.length;i++) {
        let y = this.children[i].$el.getBoundingClientRect().y;
        let height = this.children[i].$el.getBoundingClientRect().height;
        let dis = height - y + 100;
        if (dis > height) {
          this.$refs.navBar.activeI(i)
        }

        // if (dis > height) {
        //   console.log(i+'离开')
        // }
      }
    },
    handleActiveI(i){
      this.children.forEach(item=>item.isActive = false)
      let form = this.children[i];
      form.isActive = true
    },
    handleNavClick(item) {
      let $el = item.component.$el;
      util.scrollByEl($el)
    },

    handleTopClick(){
      let el = document.body.getElementsByClassName('d2-container-full__body')[0];
      util.scrollToTop(el)
    }
  },
  computed:{
    forms(){
      return this.children.map(item =>{
        return {
          key: item.key,
          title: item.title,
          icon: item.icon? item.icon: 'el-icon-delete',
          status: item.status? item.status: 'success',
          component: item,
          isActive: item.isActive
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>

<style lang="scss">

</style>
